<template>
  <mu-flex class="header" justify-content="start">
    <mu-flex justify-content="center">
      <mu-icon class="menu" value="menu" @click="open()"></mu-icon>
      <mu-drawer
        class="menu-drawer"
        :open.sync="flag"
        :docked="docked()"
        :right="false"
      >
        <mu-flex
          justify-content="center"
          direction="column"
          align-items="center"
        >
          <mu-flex justify-content="center">
            <mu-avatar class="avatar">
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic%2Fc4%2F9f%2F09%2Fc49f090757360f843141fe2bab2cfc8f_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645102352&t=7c98927e9fab254ac6fcba2ccb4e1fee"
              /> </mu-avatar
          ></mu-flex>
          <mu-flex justify-content="center" class="menu-list">
            <mu-list>
              <mu-list-item
                v-for="item in menus"
                :key="item.path"
                class="menu-item"
                button
                :ripple="true"
                @click="toggleRouter(item.path)"
              >
                <mu-list-item-action>
                  <mu-icon :value="item.icon"></mu-icon>
                </mu-list-item-action>
                <mu-list-item-title>{{ item.title }}</mu-list-item-title>
              </mu-list-item>
            </mu-list>
          </mu-flex>
        </mu-flex>
      </mu-drawer>
    </mu-flex>
  </mu-flex>
</template>

<script>
export default {
  data() {
    return {
      flag: false,
    };
  },
  methods: {
    open() {
      this.flag = true;
    },
    docked() {
      return false;
    },
    toggleRouter(index) {
      this.flag = false;
      if (this.$route.path === index) {
        return;
      }
      this.$router.push(index);
    },
  },
  computed: {
    menus: function () {
      return this.$router.options.routes;
    },
  },
};
</script>

<style lang="less" scoped>
.menu {
  position: fixed;
  top: 16px;
  left: 16px;
  color: #fff !important;
  z-index: 1501;
}
.header {
  max-width: 750px;
  height: 100%;
  .menu {
    font-size: 36px;
  }
}
.menu-drawer {
  width: 300px;
}
.avatar {
  margin-top: 88px;
  width: 144px !important;
  height: 144px !important;
}
.menu-item {
  margin: 0;
}

.material-icons {
  font-size: 28px;
  color: #4c4948;
}
.mu-item-title {
  font-size: 20px !important;
  color: #4c4948;
  line-height: 36px !important;
  height: 36px;
}
.red {
  background-color: red;
}
</style>